<template>
  <div id="" class="container">
    <div class="header">
      <div class="img">
        <img src="../../../assets/img/header/logo.png" alt="">
      </div>
    </div>
    <div class="content">
      <div class="userInfoWrapper">
        <div class="inputWrapper">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item prop="userName" class="inputWrap">
              <div class="input1">
                <el-input
                    class="input"
                    placeholder="请输入您的用户名"
                    v-model="ruleForm.userName">
                </el-input>
              </div>
            </el-form-item>
            <el-form-item prop="userPwd" class="inputWrap">
              <div class="input2">
                <el-input
                    class="input"
                    placeholder="请输入您的密码"
                    v-model="ruleForm.userPwd"
                    type="password">
                </el-input>
              </div>
            </el-form-item>
            <div class="login-bottom">
              <button class="but" @click="submitForm('ruleForm')" :disabled="disBtn">登录</button>
            </div>
            <!--            <div class="checked">-->
            <!--              <el-checkbox v-model="checked">记住密码</el-checkbox>-->
            <!--            </div>-->
          </el-form>
        </div>
      </div>
    </div>
    <footer class="footer">
      <div class="footerContent">
        <div class="img">
          <img src="../../../assets/img/home/miao.png" alt="">
        </div>
        <div class="info">
          <!--<p class="text">版权：广州林猫物种自动识别技术有限公司</p>-->
          <p class="text">版权：广西壮族自治区林业科学研究院</p>
        </div>
      </div>
    </footer>
    <Loding v-if="isShowLoading"></Loding>
  </div>
</template>

<script>
import LoginAPI from '../../../api/loginApi'
import Loding from '../../../components/Loding'

export default {
  name: 'login',
  data () {
    let validateName = (rule, value, callback) => {
      let uPattern = /^[a-zA-Z0-9]{2,16}$/ // 用户名正则，2到16位（字母，数字，下划线）
      if (!value) {
        return callback(new Error('用户名不能为空！'))
      } else {
        if (uPattern.test(value) === false) {
          callback(new Error('请输入正确的用户名'))
        } else {
          callback()
        }
      }
    }
    let validatePwd = (rule, value, callback) => {
      let pPattern = /^[a-zA-Z0-9]{4,16}$/ // 密码正则，4到16位（字母，数字，下划线）
      if (value === '') {
        callback(new Error('密码不能为空！'))
      } else {
        if (pPattern.test(value) === false) {
          callback(new Error('请输入正确的密码'))
        } else {
          callback()
        }
      }
    }
    return {
      isShowLoading: false,
      ruleForm: {
        userName: '',
        userPwd: ''
      },
      checked: false,
      disBtn: false,
      rules: {
        userName: [
          {validator: validateName, trigger: 'blur'}
        ],
        userPwd: [
          {validator: validatePwd, trigger: 'blur'}
        ]
      }
    }
  },
  components: {LoginAPI, Loding},
  created () {
  },
  methods: {
    submitForm (formName) {
      let dom = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isShowLoading = true
          dom.disBtn = true
          LoginAPI.login({
            account: this.ruleForm.userName,
            password: this.ruleForm.userPwd
          }).then(res => {
            dom.disBtn = false
            if (res.data.message === 'success') {
              let result = res.data.result
              window.localStorage.token = result.token.replace(/"/g, '')
              window.localStorage.setItem('user', JSON.stringify(result))
             /* console.log(JSON.stringify(result.menuList))
              let user = res.data
              window.localStorage.token = user.result.token.replace(/"/g, '')
              window.localStorage.menu = user.result.menuList
              console.log(window.localStorage.token)
              localStorage.setItem('userName', res.data.result.userName)
              localStorage.setItem('readOnly', res.data.result.readOnly)
              localStorage.setItem('userId', res.data.result.userId)
              localStorage.setItem('phone', res.data.result.mobilePhoneNo)
              localStorage.setItem('unit', res.data.result.departmentName)
              localStorage.setItem('departmentId', res.data.result.departmentId)*/
              dom.$router.push({path: '/home'})
              this.isShowLoading = false
            } else {
              this.isShowLoading = false
              this.$message.error('登录失败，请重试')
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .container {
    width: 100%;
    /*height: 100%;*/
    overflow: hidden;
    height: 100vh;
    background-image: url("../../../assets/img/login/back.png");
    background-size: cover;
    background-repeat: no-repeat;
  }

  .header {
    margin-top: 140px;

    .img {
      /*height: 94px;*/
      /*width: 984px;*/
      width: 37%;
      margin: 0 auto;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .content {
    margin-top: 35px;

    .userInfoWrapper {
      margin: 0 auto;
      width: 677px;
      height: 457px;
      background: rgba(0, 0, 0, 0) url(../../../assets/img/login/case.png) no-repeat scroll 50% 50% / cover;
      padding: 0.8%;

      .inputWrap {
        width: 31%;
        height: 66px;
        margin-right: 4%;
      }
    }

    .input1 {
      width: 380px;
      height: 48px;
      background: url(../../../assets/img/login/input1.png) no-repeat scroll 50% 50% / cover;
    }

    .input2 {
      width: 380px;
      height: 48px;
      background: url(../../../assets/img/login/input2.png) no-repeat scroll 50% 50% / cover;
    }

    .login-bottom {
      width: 192px;
      height: 73px;
      background: rgba(0, 0, 0, 0) url(../../../assets/img/login/btn.png) no-repeat scroll 50% 50% / cover;
      margin-left: 90px;
      margin-top: 40px;
    }

    .inputWrapper {
      display: flex;
      flex-direction: column;
      margin: 140px 0 0 140px;

      .input /deep/ .el-input__prefix {
        /*background-color: red;*/
        line-height: 66px;
      }

      .input /deep/ .el-input__inner {
        background-color: transparent !important;
        border: 0;
        height: 48px;
        padding-left: 69px;
        /*font-size: 18px;*/
        font-size: 1.8rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .icon {
        display: inline-block;
        width: 25px;
        height: 23px;
        margin-left: 30px;

        img {
          vertical-align: text-bottom;
          height: 100%;
          width: 100%;
        }
      }

      .but {
        cursor: pointer;
        border: none;
        font-size: 2.4rem;
        font-weight: 400;
        color: #00ffff;
        background-color: transparent;
        margin: 17px 0 0 65px;
      }

      /*.checked{*/
      /*  margin-left: 6%;*/
      /*  text-align: left;*/
      /*}*/
      /*.checked /deep/ .el-checkbox__inner{*/
      /*  border: none;*/
      /*  background-color: #ffffff;*/
      /*  height: 19px;*/
      /*  width: 19px;*/
      /*  font-size:28px;*/
      /*  font-weight:400;*/
      /*  color:rgba(255,255,255,1);*/
      /*}*/
      /*.checked /deep/ .el-checkbox__inner::after {*/
      /*  !*border: 2px solid #FFF !important;*!*/
      /*  border-width: 2px;*/
      /*  border-color: black;*/
      /*  height: 9px;*/
      /*  left: 6px;*/
      /*  top: 1px;*/
      /*  width: 5px;*/
      /*}*/
      /*.checked /deep/ .el-checkbox__label {*/
      /*  !*color:rgba(255,255,255,0.5);*!*/
      /*  font-size: 18px;*/
      /*  vertical-align: text-bottom;*/
      /*}*/
    }
  }

  .footer {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    /*background-color: red;*/

    .footerContent {
      .img {
        display: inline-block;
        width: 29px;
        height: 24px;
        vertical-align: middle;

        img {
          height: 100%;
          width: 100%;
        }
      }

      .info {
        display: inline-block;

        .text {
          font-size: 18px;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
</style>
